<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>启动会议室</title>
  <link rel="shortcut icon" type="image/x-icon" href="../../layuiadmin/images/faviconHst.ico" />
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all" />
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
      background-color: #eeeeee
    }
    .container {
      width: 1080px;
      height: 600px;
      border-radius: 8px;
      background-color: #1A73E8;
      display: flex;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); 
    }
    .leftbox {
      width: 55%;
      height: 100%;
    }
    .rightbox {
      width: 45%;
      height: 100%;
      border-radius: 10px 0 0 10px;
      background-color: #fff;
      display: flex;
      align-items: center;
    }
    .left_top {
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: #fff;
    }
    .left_top .title .big {
      font-size: 45px;
      margin-bottom: 10px;
    }
    .left_top .title .small {
      font-size: 28px;
    }
    .left_top img {
      width: 195px;
      height: 125px;
    }
    .left_bottom {
      margin-top: 245px;
      color: #fff;
    }
    .left_bottom .desc1 {
      letter-spacing: 2px;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
    }
    .left_bottom .desc1 a{
      text-decoration: underline;
      color: #ff5722;
    }
    .left_bottom .desc2 {
      margin-top: 30px;
      text-align: center;
      font-size: 12px;
    }
    .layui-form {
      margin-top: 100px;
      width: 80%;
    }
    .layui-input-block {
      box-shadow: 1px 6px 8px #eeeeee
    }
    .layui-input-block input {
      border: none;
      outline: none;
      border-bottom: 0.5rpx solid #fbfbfb;
      background-color: #fff;
    }
    button.layui-btn.layui-btn-normal.layui-btn-fluid {
      background-color: #1A73E8 !important;
      letter-spacing: 2px;
    }
    .meetingCon {
      width: 1080px;
      height: 600px;
      border-radius: 8px;
    }
    .mainNote h1{
      background-color: #1A73E8;
      color: #fff;
      padding: 10px;
      box-sizing: border-box;
    }
    .meetingEditorCon{
      width: 90%;
      margin: 20px auto;
    }
    .editorBottomBtn{
      text-align: right;
      padding: 10px;
    }
    .editorBottomBtn button{
      border-radius: 5px;
    }
    .editorBottomBtn button:first-child{
      background-color:transparent;
      border: 1px solid #ccc;
      color: #1A73E8;
    }
    .editorBottomBtn button:last-child{
      background-color:#1A73E8;
      border: 1px solid #1A73E8;
    }
    a:hover{
      color: #333;
    }
    /* .meetingEditorCon{
      display: none;
    } */
  </style>
</head>

<body>
    <div class="container mainForm">
      <div class="leftbox">
        <div class="left_top">
          <div class="title">
            <div class="big">欢迎使用</div>
            <div class="small">监护办在线视频会议</div>
          </div>
          <img src="../../layuiadmin/images/computer.png" alt="" />
        </div>
        <div class="left_bottom">
          <div class="desc1">首次使用的用户

            下载并运行会议助手<a href="" id="client" rel="noopener noreferrer">客户端</a></li>

          </div>
        </div>
      </div>
      <div class="rightbox">
        <form class="layui-form" action="">
          <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon  layui-icon-username"></i></label>
            <div class="layui-input-block">
              <input type="text" name="userName" required lay-verify="required" placeholder="请输入账号" autocomplete="off"
                class="layui-input " id="account">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"><i class="layui-icon  layui-icon-password"></i></label>
            <div class="layui-input-block">
              <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                autocomplete="off" class="layui-input " id="pwd">
            </div>

          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block"><button type="button" class="layui-btn layui-btn-normal layui-btn-fluid"
                id="open">进入会议室</button></div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block"><button type="button" class="layui-btn layui-btn-danger layui-btn-fluid"
                id="openEditor">进入编辑页</button></div>
          </div>
      </div>

    </div>
    <div class="mainNote" style="display: none;">
      <h1>会议纪要</h1>
      <!-- <button type="button" class="layui-btn layui-btn-warm " id="back">返回登录</button> -->
      <div class="meetingEditorCon">
        <div id="meetingEditor"></div>
        <!-- <textarea class="meetingCon"></textarea> -->
        <div class="editorBottomBtn">
          <button type="button" class="layui-btn cancelBtn">取消</button>
          <button type="button" class="layui-btn" id="save">确定</button>
        </div>
      </div>
    </div>
  <script src="../../layuiadmin/layui/layui.js"></script>
  <script src="../../layuiadmin/modules/const_config.js"></script>
  <script src="../../layuiadmin/modules/wangEditor.min.js"></script>
  <script>
    layui.use(["layer", "form"], function () {
      let openMeeting;
      let downloadurl = "";
      var $ = layui.$,
        setter = layui.setter,
        form = layui.form;
      function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
          return unescape(r[2]);
        }
        return '';
      }
      // $("#back").click(function(){
      //   $('.mainForm').css("display", "block")
      //   $('.mainNote').css("display", "none")
      // })
      // 富文本编辑器
      const E = window.wangEditor;
      const editor = new E("#meetingEditor");
      editor.config.menus = [
          'bold',
          'head',
          'italic',
          'underline'
      ]
      editor.config.onchange = function (newHtml) {
        console.log("onchange", newHtml);
      };
      editor.config.height = 600;
      editor.create();
      $("#save").click(saveNote)
      function saveNote() {
        $.ajax({
          url: base_url + "/meeting/note",
          async: true,
          type: "post",
          data: {
            meetingId: meetingId,
            note: editor.txt.html()
          },
          headers: {
            Accept: "application/json; charset=utf-8",
            Authorization: token,
          },
          success: function (req) {
            layer.msg(req.message, { icon: 1 });
          },
          error: function () {
            console.log(1)
          }
        });
      }
      $('.cancelBtn').click(function(){
        editor.txt.html("");
      })
      $("#open").click().on('click',function(){
        let url = getURL(openMeeting.link, openMeeting.roomId, openMeeting.roomPwd, $("#account").val(), $("#pwd").val(), 0, '');
        window.location.href = url;
      });

      function openRoom() {
        let url = getURL(openMeeting.link, openMeeting.roomId, openMeeting.roomPwd, $("#account").val(), $("#pwd").val(), 0, '');
        try {
          window.location.href = url;
        } catch (error) {}
        var pwd = $("#pwd").val();
        console.log(pwd)
        $('#openEditor').click().on("click", function (){
          if (pwd != "") {
            //此处打开会议备忘录编辑页面
            $('.mainForm').css("display", "none")
            $('.mainNote').css("display", "block")
          }
        })
      }
      function getURL(NodeManAddr, roomID, roomPwd, UserName, UserPassword, Type, NodeID) {
        var GroupName = "Fastonz";
        var ProductName = "FMDesktop";
        var room_para;
        room_para = "-link" + " " + NodeManAddr + " " + "-uname" + " \"" + UserName + "\" " + "-utype" + " " + Type;
        if (roomID != null && roomID != 'null' && roomID != '')
          room_para += " " + "-rid" + " " + roomID;
        if (UserPassword != null && UserPassword != 'null' && UserPassword != '')
          room_para += " " + "-upwd" + " " + UserPassword;
        if (roomPwd != null && roomPwd != 'null' && roomPwd != '')
          room_para += " " + "-rpwd" + " " + roomPwd;
        if (NodeID != null && NodeID != 'null' && NodeID != '')
          room_para += " " + "-node" + " " + NodeID;
        room_para += " " + "-stype" + " 1";

        var url = "{" + openMeeting.meetingAddress + "}{" + GroupName + "}{" + ProductName + "}{" + room_para + "}";
        url = encodeURIComponent(url);
        return "launcher.fsm://" + encode64(url);
      }
      let meetingId = getQueryString("mid");
      let uid = getQueryString("uid");
      let token = getQueryString("token")
      if (meetingId) {
        $.ajax({
          url: base_url + "/meeting/openMeeting?meetingId=" + meetingId + "&userNumber=" + uid,
          headers: {
            Accept: "application/json; charset=utf-8",
          },
          async: true,
          type: "get",
          success: function (req) {
            if (req.code == "200") {
              var data = req.data;
              openMeeting = data;
              $("#account").val(data.userName)
              $("#pwd").val(data.userPwd)
              downloadurl = data.fileAddress;
              $("#client").attr("href", downloadurl)
              openRoom()
            }
          },
        });
      }
      var ua = navigator.userAgent.toLowerCase();
      if (ua.indexOf(" chrome/") >= 0 || ua.indexOf(" firefox/") >= 0 || ua.indexOf(' gecko/') >= 0) {
        var StringMaker = function () {
          this.str = "";
          this.length = 0;
          this.append = function (s) {
            this.str += s;
            this.length += s.length;
          }
          this.prepend = function (s) {
            this.str = s + this.str;
            this.length += s.length;
          }
          this.toString = function () {
            return this.str;
          }
        }
      } else {
        var StringMaker = function () {
          this.parts = [];
          this.length = 0;
          this.append = function (s) {
            this.parts.push(s);
            this.length += s.length;
          }
          this.prepend = function (s) {
            this.parts.unshift(s);
            this.length += s.length;
          }
          this.toString = function () {
            return this.parts.join('');
          }
        }
      }
      var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
      function encode64(input) {
        var output = new StringMaker();
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;

        while (i < input.length) {
          chr1 = input.charCodeAt(i++);
          chr2 = input.charCodeAt(i++);
          chr3 = input.charCodeAt(i++);

          enc1 = chr1 >> 2;
          enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
          enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
          enc4 = chr3 & 63;

          if (isNaN(chr2)) {
            enc3 = enc4 = 64;
          } else if (isNaN(chr3)) {
            enc4 = 64;
          }

          output.append(keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4));
        }
        return output.toString();
      }
    });
  </script>
</body>

</html>